<script>
import YmForm from "@/ym/components/form/YmForm";
import { COMPONENTS } from "@/store/quark";
import {CELL, NAME, PASCAL, WIDGET} from "@/store/elementui";

function filter (arr) {
  let has = {}

  return arr.filter((v) => {
    if (v[NAME] === undefined) return true
    if (has[v[NAME]] === true) return false
    has[v[NAME]] = true
    return true
  })
}

export default {
  functional: true,
  render(h, context) {

    const { props, listeners } = context
    const { value, visible } = props
    if (!visible || !value) return undefined

    console.log(value)

    const definition = filter([
      ...(COMPONENTS[value[PASCAL]] || []),
      ...(COMPONENTS[value[WIDGET]] || []),
      ...(COMPONENTS[value[CELL]] || [])
    ])

    console.log(definition)

    const form = {
      value,
      fields: definition,
      'label-position': "top",
      'size': "mini"
    }

    return h ('el-drawer', {
      props: {
        visible,
        title: "配置面板"
      },
      on: {
        close: () => {
          listeners['update:visible'] && listeners['update:visible'](false)
        },
      }
    }, [
        h (YmForm, {
          style: {
            padding: '20px'
          },
          props: form,
          attrs: form,
          on: listeners
        })
    ])
  }
}
</script>

<style scoped>

</style>
